<template>
  <div>
    <el-dialog v-el-drag-dialog :title="form.spaceName" width="40%" :visible.sync="dialogVisible">
      <el-form ref="dataForm" label-position="left" label-width="100px">
        <el-form-item label="Category">{{ form.category }}</el-form-item>
        <el-form-item label="Alias Name">{{ form.aliasName }}</el-form-item>
        <el-form-item label="Purpose">{{ form.purpose }}</el-form-item>
        <el-form-item label="Password">{{ form.password }}</el-form-item>
        <el-form-item label="Free">{{ form.free | formatCapacity() }}</el-form-item>
        <el-form-item label="Capacity">{{ form.capacity | formatCapacity() }}</el-form-item>
        <el-form-item label="State">{{ form.state }}</el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { fetchMemorySpace } from '@/api/usr/memory-space'

export default {
  name: 'SpaceAttribute',
  directives: { elDragDialog },
  data() {
    return {
      form: {},
      dialogVisible: false
    }
  },
  computed: {
    categories() {
      return this.$store.getters.dictionaries.filter(category => category.dictGroup === 'space_category')
    }
  },
  created() {
    this.$on('open', this.open)
  },
  methods: {
    open(row) {
      if (!row.spaceName) {
        fetchMemorySpace(row.id).then(res => {
          this.form = Object.assign({}, res.result, { category: this.showText(res.result.category.toString()) })
        })
      } else {
        this.form = Object.assign({}, row, { category: this.showText(row.category.toString()) })
      }
      this.dialogVisible = true
    },
    showText(code) {
      const cate = this.categories.find(category => category.code === code)
      return (cate && cate.text) || ''
    }
  }
}
</script>
